<template>
  <el-dialog v-model="dialog.visible" title="审核" width="55%" @close="handleCloseDialog">
    <el-card shadow="never" class="table-card">
      <el-form ref="formRef" :model="formData" :rules="formRules" label-width="150px" class="form mb-0">
        <el-form-item label="分佣设置" prop="storeAddress">
          <el-input-number :min="0" v-model="mallCommission" controls-position="right" @change="changeMall">
            <template #suffix>
              <span>%</span>
            </template>
          </el-input-number>
        </el-form-item>
        <el-form-item label="主营品类" prop="storeAddress">
          {{ formData?.mainCategoryName }}类最低佣金比例为: {{ formData?.categoryCommission * 100 }}%
        </el-form-item>

        <el-form-item label="门店地址" prop="storeAddress">
          <el-input v-model="formData.storeAddress" placeholder="请输入地址" disabled />
        </el-form-item>
        <el-form-item label="地图标注" prop="latitude">
          <Map ref="mapContainer" class="map-container" :lat="formData.latitude" :lng="formData.longitude" clickable
            @click="handleClickMap"></Map>
        </el-form-item>
      </el-form>
    </el-card>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="handleSubmit">确 定</el-button>
        <el-button @click="handleCloseDialog">取 消</el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script setup lang="ts">
const emit = defineEmits(["update:modelValue", "submit"]);
const dialog = reactive({
  title: "",
  visible: false,
});
const formRef = ref();
const status = ref();

const mallCommission = ref()
const defaultFormData = {
  longitude: "",
  latitude: "",
  storeAddress: "",
  mallCommission: undefined,
  categoryCommission: undefined,
};
const formData = ref({
  ...defaultFormData,
});
const formRules = reactive({
  latitude: [{ required: true, message: "地图标注不能为空", trigger: "change" }],
  storeAddress: [{ required: true, message: "请输入地址", trigger: "blur" }],
});

async function handleSubmit() {
  // 校验分佣设置 不能低于 主营品类的分佣设置
  if (formData.value.categoryCommission > formData.value.mallCommission) {
    ElMessage.warning("分佣设置不能小于默认比例");
    return;
  }
  const validate = await formRef.value.validate();
  if (!validate) return;
  dialog.visible = false;
  emit("submit", formData.value, status.value);
}
const mapContainer = ref(null);
// 关闭弹窗
function handleCloseDialog() {
  dialog.visible = false;
  formData.value = {};
  mallCommission.value = undefined
  Object.assign(formData.value, defaultFormData);
  mapContainer.value.clearMarker(); //  清除Marker
  emit("update:modelValue", false); // 关闭弹窗
}

function showModal(val, st) {
  dialog.visible = true;
  status.value = st;
  mallCommission.value = val.mallCommission * 100
  Object.assign(formData.value, defaultFormData, val);
}

function handleClickMap(val) {
  formData.value.latitude = val.lnglat.lat;
  formData.value.longitude = val.lnglat.lng;
}

function changeMall(val) {
  if (val) {
    formData.value.mallCommission = val / 100
  } else {
    formData.value.mallCommission = undefined
  }
  console.log(11111);

}

defineExpose({
  showModal,
});
</script>
<style style="scss" scoped>
.map-container {
  width: 100%;
  height: 400px;
}
</style>
